---
title: Tema Personalizado
description: Creando un tema personalizado
---

# Tema Personalizado

## Creando un tema personalizado

> Nota: Esta API es inestable y probablemente cambiará en el futuro cercano. Recomendamos adherirse a los [temas integrados](/docs/theming) por ahora.

Mientras que los temas integrados ofrecen cierto nivel de personalización, el tipo `Theme` se proporciona para ayudarte a definir tus propios temas personalizados con acceso de bajo nivel a las variables subyacentes del tema.

```tsx
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

const App = () => (
  <RainbowKitProvider theme={myCustomTheme} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>;
)
```

### Extender un tema incorporado

Puedes extender un tema incorporado sin tener que redefinir todo el tema. Esto es útil cuando solo deseas sobrescribir tokens de tema específicos.

Para hacer esto, instala `lodash.merge` (o equivalente):

```bash
npm install lodash.merge
```

Impórtalo junto con el tema que deseas extender (ej: `darkTheme`) y el tipo `Theme` de TypeScript:

```tsx
import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';
```

Luego, combina el tema incorporado con los tokens de tema que deseas sobrescribir. En este ejemplo, estoy sobrescribiendo el token `accentColor` para que coincida con el color de acento de mi marca.

```tsx
const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);
```

Finalmente, ahora puedes pasar tu tema personalizado a la propiedad `theme` de `RainbowKitProvider`.

```tsx
const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### Creando selectores de temas personalizados

Si tu aplicación es renderizada en servidor/estáticamente y permite a los usuarios cambiar manualmente entre temas, el sistema de temas de RainbowKit puede conectarse a selectores CSS personalizados con las siguientes funciones que pueden usarse con cualquier sistema CSS-in-JS:

- `cssStringFromTheme`
- `cssObjectFromTheme`

Estas funciones devuelven CSS que establece todas las variables de tema requeridas. Dado que se soportan tanto cadenas como objetos, esto puede integrarse con cualquier sistema CSS-in-JS.

Como un ejemplo básico, puedes renderizar tu propio elemento `style` con selectores personalizados para cada tema. Como estamos tomando el control de la renderización del CSS del tema, estamos pasando `null` a la propiedad `theme` para que RainbowKitProvider no renderice ningún estilo para nosotros. También observa el uso de la opción de extensión en la función cssStringFromTheme que omite cualquier variable de tema que sea la misma que el tema base.

```tsx
import {
  RainbowKitProvider,
  cssStringFromTheme,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};
```
